<script setup>
// nextTick 用于在 DOM 更新后执行回调
import {nextTick, ref, watch} from "vue";

// 定义组件接收的 props
const props = defineProps({
  value: {
    type: Array,
    default: () => []
  }
})
// 定义自定义事件 update:value，用于实现 v-model 的双向绑定
const emits = defineEmits(['update:value'])
const tags = ref(props.value)
// 响应式变量 inputValue 存储输入框的临时值
const inputValue = ref('')
// 控制输入框的显示/隐藏状态，初始为隐藏
const inputVisible = ref(false)
// 引用 DOM 元素
const InputRef = ref(null)
// 监听父组件传递的 props.value 变化：当父组件更新 value 时，同步更新子组件的 tags.value
watch(() => props.value, (newValue) => {
  tags.value = newValue
})

// 处理标签关闭逻辑：从 tags 数组中移除指定 tag
const handleClose = (tag) => {
  tags.value.splice(tags.value.indexOf(tag), 1)
}

// 显示输入框并聚焦
const showInput = () => {
  // 控制输入框显示
  inputVisible.value = true
  // 确保 DOM 更新后执行聚焦操作
  nextTick(() => {
    // InputRef：通过 Vue3 的 ref() 创建的模板引用对象，用于访问 DOM 元素或组件实例
    // ?.（可选链操作符）：防止访问 null 或 undefined 对象时引发错误，若左侧值为空则立即停止执行
    // focus()：DOM 元素的原生方法，用于聚焦输入框
    InputRef.value?.input?.focus()
  })
}

const handleInputConfirm = () => {
  if (inputValue.value) {
    // 将 inputValue.value 添加到 tags 数组
    tags.value.push(inputValue.value)
  }
  // 重置输入框状态（隐藏输入框、清空临时值）
  inputVisible.value = false
  inputValue.value = ''
  // 通过 emits('update:value', tags.value) 通知父组件更新数据
  emits('update:value', tags.value)
}

</script>

<template>
  <!--多项目输入组件-->
  <div class="items-input-box">
    <el-tag v-for="tag in tags" :key="tag" closable :disable-transitions="false" @close="handleClose(tag)" >{{tag}}</el-tag>
    <el-input v-if="inputVisible" ref="InputRef" v-model="inputValue" class="w-20" size="small" @keyup.enter="handleInputConfirm" @blur="handleInputConfirm" />
    <el-button v-else class="button-new-tag" size="small" @click="showInput"> + 新增 </el-button>
  </div>
</template>

<style scoped lang="stylus">
.items-input-box {
  display flex

  .el-tag {
    display flex
    margin-right 6px
  }
}

</style>